import { Input } from "@arco-design/web-react";

import BaseItem from "./base-item";
import { useState } from "react";

export default function PanelBase({ style, data }) {
	const [panelData, setPanelData] = useState(data);

	const inputChangeHandle = value => {
		const filterData = [];
		panelData.map(item => {
			if (item.label.includes(value)) {
				filterData.push(item);
			}
		});

		filterData.length && value !== "" ? setPanelData(filterData) : setPanelData(data);
	};

	return (
		<div className="panel panel-base" style={style}>
			<div className="panel-header">
				<Input allowClear placeholder="请输入组件关键词" onChange={inputChangeHandle} />
			</div>
			<div className="panel-content">
				{panelData &&
					panelData.map((item, index) => {
						return <BaseItem key={index} data={item}></BaseItem>;
					})}
			</div>
			<style global jsx>
				{`
					.panel-content {
						display: flex;
						flex-wrap: wrap;
						align-content: flex-start;
						justify-content: space-between;
						gap: 9px;
						height: 100%;
						padding: 10px;
						transition: all 0.7s linear;
						overflow: hidden;
					}

					.panel-content .panel-item {
						display: flex;
						flex-direction: column;
						width: 46%;
						max-width: 180px;
						height: 82px;
						margin: 0;
						border: 1px solid #eee;
						transition: all 0.8s;
						box-sizing: border-box;
						color: #4e5969;
						font-size: 14px;
						overflow: hidden;
						cursor: pointer;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.panel-content .panel-item:hover {
						box-shadow: 0 0 5px 0 #00000033;
					}

					.panel-content .panel-item .base-item-img {
						height: 48px;
						padding: 5px;
						border-bottom: 1px solid #eee;
						overflow: hidden;
					}

					.panel-content .panel-item .base-item-img img {
						width: 100% !important;
						height: 48px;
					}
				`}
			</style>
		</div>
	);
}
